import { Button, Checkbox, Form, Input, Card } from "antd";
import { useNavigate } from "react-router-dom";
import loginSytle from "./login.module.less";
import { getUser, apidata } from "@/api/user";
import { Space, Table, Tag, message } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { addUser } from "@/store/user";

export default function LoginDom() {
  let navigate = useNavigate();
  const dispatch = useDispatch();
  let stateUsert = useSelector((state) => state.user);
  const [messageApi, contextHolder] = message.useMessage();

  const onFinish = (values) => {
    getUser(values).then((res) => {
      if (res.data.code == 201) {
        messageApi.info(`账号密码： ${res.data.data.username}&&${res.data.data.password}!`);

        return;
      }
      if (res.data.code == 200) {
        messageApi.success(`欢迎使用`);
        dispatch(
          addUser({
            name: res.data.data.name,
          })
        );

        localStorage.setItem("userId", "666");
        setTimeout(() => {
          navigate("/home");
        }, 500);

        return;
      }
    });

    // apidata().then((res) => {
    //   console.log(res);
    // });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <>
      <div className={loginSytle.root}>
        {contextHolder}
        <div>
          <Card
            className={loginSytle.form}
            title="登录"
            bordered={false}
            style={{
              width: 400,
            }}
          >
            <Form
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              style={{
                maxWidth: 600,
              }}
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="账号"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "请输入账号",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </>
  );
}
